<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">
    {{ message }}
    <input v-model="message">
    <br>
    {{ resolveMessage }}
    <br>
    <p v-for="m in movie">
        <span>{{m.name}} {{m.time}} {{m.director}}</span>
    </p>
    <input type="text" v-model="ajaxInput">
    <button @click="select">查询</button>
    <div>{{patient}}</div>

</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            movie: [{
                name: '肖申克的救赎',
                time: '1994',
                director: '弗兰克·德拉邦特',
            }, {
                name: '霸王别姬',
                time: '1993',
                director: '陈凯歌',
            }],
            patient:[],
            ajaxInput: '',
            resolveMessage: '',
        },
        methods: {
            select: function () {
                // $.ajax({
                //     dataType: "json",
                //     url: "http://localhost:8080/patient/selectOne",
                //     data: {
                //         id: this.ajaxInput
                //     },
                //     success: (res) => {
                //         console.log(res);//打印服务端返回的数据(调试用)
                //         this.patient= res;
                //         console.log(this.patient);
                //     },
                // })
                axios.get('http://localhost:8080/patient/selectOne', {
                    params: {
                        id: this.ajaxInput
                    }
                })
                    .then(res=>{
                        console.log(res);
                        this.patient=res.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        watch:{
            message: function (val) {
                console.log(val);
                this.resolveMessage= val.split('').reverse().join('');
                console.log(this.resolveMessage);
            }
        }

    })

</script>
</html>